<template>
  <!-- do something.... -->
  <template v-for="(tree, index) in data" :key="tree.id">
    <template v-if="tree.children && tree.children.length > 0">
      <div :class="`title-${tree.key.split('-').length}`">
        {{ tree.key }} -- {{ tree.title }}
      </div>
      <TreeComponent :data="tree.children" />
    </template>

    <template v-else>
      <div :class="`title-${tree.key.split('-').length}`">
        {{ tree.key }} -- {{ tree.title }}
      </div>
    </template>
  </template>

</template>

<script setup lang="ts">
interface TreeData {
  key: string
  title: string
  children: TreeData[]
}
defineProps<{ data: TreeData[] }>()
</script>

<style scoped>
.title-1 {
  margin-left: 10px;
}

.title-2 {
  margin-left: 20px;
}

.title-3 {
  margin-left: 30px;
}
</style>
